<!-- 分类参数组件 -->
<template>
    <div class="params">
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>分类参数</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片视图区域 -->
        <el-card>
            <!-- 警告区域 -->
            <el-alert title="注意：只允许为第三级分类设置相关参数" type="warning" show-icon>
            </el-alert>

            <!-- 选择商品分类 -->
            <div class="block">
                <span>请选择商品分类：</span>
                <el-cascader v-model="selectCate" :options="cateList" :props="cascaderProps" @change="handleChange">
                </el-cascader>
            </div>

            <!-- tabs标签页 v-model="activeName"-->
            <el-tabs>
                <!-- 动态属性标签页 -->
                <el-tab-pane label="动态属性">
                    <el-button type="primary" @click="AddDynamicAttrVisiable = true">添加属性</el-button>
                    <!-- 添加动态属性对话框 -->
                    <el-dialog title="添加动态属性" :visible.sync="AddDynamicAttrVisiable" width="30%">
                        <el-form ref="form" :model="addDynamicAttrReq" label-width="80px">
                            <el-form-item label="属性名称：">
                                <el-input v-model="addDynamicAttrReq.attr_name"></el-input>
                            </el-form-item>
                            <el-form-item label="属性提供选项：">
                                <el-input v-model="addDynamicAttrReq.attr_vals" placeholder="属性可以提供的选项，以逗号分隔">
                                </el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="AddDynamicAttrVisiable = false">取 消</el-button>
                            <el-button type="primary" @click="submitAddDynamicAttr">确 定</el-button>
                        </span>
                    </el-dialog>

                    <!-- 动态参数渲染表格区 -->
                    <el-table :data="dynamicAttr" style="width: 100%" border>
                        <el-table-column type="expand">
                            <!-- <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="商品描述">
                                        <span>{{ props.row.desc }}</span>
                                    </el-form-item>
                                </el-form>
                            </template> -->
                        </el-table-column>
                        <el-table-column type="index" label="#">
                        </el-table-column>
                        <el-table-column label="属性名称" prop="attr_name">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="primary" @click="updateDynamicAttr(scope.row)"><i
                                        class="el-icon-edit"></i>修改</el-button>
                                <el-button type="danger" @click="deleteDynamicAttr(scope.row)"><i
                                        class="el-icon-delete"></i>删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <!-- 修改动态属性对话框 -->
                    <el-dialog title="修改动态属性" :visible.sync="updateDynamicAttrVisiable" width="30%">
                        <el-form ref="form" :model="addDynamicAttrReq" label-width="80px">
                            <el-form-item label="新属性名：">
                                <el-input v-model="updateDynamicAttrReq.attr_name"></el-input>
                            </el-form-item>
                            <el-form-item label="新属性值：">
                                <el-input v-model="updateDynamicAttrReq.attr_vals" placeholder="属性可以提供的选项，以逗号分隔">
                                </el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="updateDynamicAttrVisiable = false">取 消</el-button>
                            <el-button type="primary" @click="submitUpdateDynamicAttr">确 定</el-button>
                        </span>
                    </el-dialog>

                </el-tab-pane>

                <!-- 静态属性标签页 -->
                <el-tab-pane label="静态属性">
                    <el-button type="primary" @click="addStaticAttr">添加属性</el-button>
                    <!-- 添加静态属性对话框 -->
                    <el-dialog title="添加静态属性" :visible.sync="addStaticAttrVisiable" width="30%">
                        <el-form ref="form" :model="addDynamicAttrReq" label-width="80px">
                            <el-form-item label="属性名称：">
                                <el-input v-model="addStaticAttrReq.attr_name"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="addStaticAttrVisiable = false">取 消</el-button>
                            <el-button type="primary" @click="submitAddStaticAttr">确 定</el-button>
                        </span>
                    </el-dialog>

                    <!-- 修改静态参数对话框 -->
                    <el-dialog title="修改静态属性" :visible.sync="updateStaticAttrVisiable" width="30%">
                        <el-form ref="form" :model="updateStaticAttrReq" label-width="80px">
                            <el-form-item label="属性名称：">
                                <el-input v-model="updateStaticAttrReq.attr_name"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="updateStaticAttrVisiable = false">取 消</el-button>
                            <el-button type="primary" @click="submitUpdateStaticAttr">确 定</el-button>
                        </span>
                    </el-dialog>

                    <!-- 静态参数展示表格 -->
                    <el-table :data="staticAttr" style="width: 100%" border>
                        <el-table-column type="expand">
                            <!-- <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="商品描述">
                                        <span>{{ props.row.desc }}</span>
                                    </el-form-item>
                                </el-form>
                            </template> -->
                        </el-table-column>
                        <el-table-column type="index" label="#">
                        </el-table-column>
                        <el-table-column label="属性名称" prop="attr_name">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="primary" @click="updateStaticAttr(scope.row)"><i
                                        class="el-icon-edit"></i>修改</el-button>
                                <el-button type="danger" @click="deleteStaticAttr(scope.row.attr_id)"><i
                                        class="el-icon-delete"></i>删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>

        </el-card>
    </div>
</template>

<script>
    export default {
        created() {
            this.getCateList()
        },
        data() {
            return {
                cateList: [],
                cascaderProps: {
                    expandTrigger: 'hover',
                    label: 'cat_name',
                    value: 'cat_id',
                    children: 'children'
                },
                //级联选择器选中的信息
                selectCate: [],
                //选中的商品分类id
                selectID: '',
                //静态属性
                staticAttr: [],
                //动态属性
                dynamicAttr: [],
                //是否显示添加动态属性对话框
                AddDynamicAttrVisiable: false,
                // 添加动态属性请求参数
                addDynamicAttrReq: {
                    //动态属性名
                    attr_name: '',
                    attr_sel: 'many',
                    //动态属性可选描述，以逗号分隔
                    attr_vals: ''
                },

                //修改动态属性请求参数
                updateDynamicAttrReq: {
                    attr_name: '',
                    attr_sel: 'many',
                    attr_vals: ''
                },
                //是否显示修改动态属性对话框
                updateDynamicAttrVisiable: false,
                //选中的属性id
                selectAttrID: '',

                //添加静态参数请求参数
                addStaticAttrReq: {
                    attr_name: '',
                    attr_sel: 'only',
                },
                // 添加静态属性对话框
                addStaticAttrVisiable: false,
                //修改静态参数请求参数
                updateStaticAttrReq: {
                    attr_name: '',
                    attr_sel: 'only'
                },
                //修改静态属性对话框
                updateStaticAttrVisiable: false
            }
        },
        methods: {
            //获取分类数据
            async getCateList() {
                const {
                    data: res
                } = await this.$http.get('categories')
                if (res.meta.status !== 200) {
                    return this.$message.erorr('获取分类数据失败')
                }
                this.cateList = res.data
            },
            //改变级联选择器选中对象
            handleChange() {
                this.selectID = this.selectCate[this.selectCate.length - 1]
                this.getDynamicAttr()
                this.getStaticAttr()
            },
            //获取动态参数
            async getDynamicAttr() {
                const {
                    data: res
                } = await this.$http.get(`categories/${this.selectID}/attributes`, {
                    params: {
                        sel: 'many'
                    }
                })
                if (res.meta.status !== 200) {
                    return this.$message.error('获取动态属性失败')
                }
                console.log(res.data);
                this.dynamicAttr = res.data
            },
            //获取静态参数
            async getStaticAttr() {
                const {
                    data: res
                } = await this.$http.get(`categories/${this.selectID}/attributes`, {
                    params: {
                        sel: 'only'
                    }
                })
                if (res.meta.status !== 200) {
                    return this.$message.error('获取静态属性失败')
                }
                this.staticAttr = res.data
            },
            //添加动态参数
            async submitAddDynamicAttr() {
                const {
                    data: res
                } = await this.$http.post(`categories/${this.selectID}/attributes`, this.addDynamicAttrReq)
                if (res.meta.status !== 201) {
                    return this.$message.error('添加属性失败！')
                }
                this.$message.success('添加属性成功！')
                this.getDynamicAttr()
                this.AddDynamicAttrVisiable = false
            },
            // 更新动态参数
            updateDynamicAttr(selectAttr) {
                this.updateDynamicAttrVisiable = true
                //赋值要修改的属性值id
                this.selectAttrID = selectAttr.attr_id
            },
            async submitUpdateDynamicAttr() {
                const {
                    data: res
                } = await this.$http.put(`categories/${this.selectID}/attributes/${this.selectAttrID}`, this
                    .updateDynamicAttrReq)
                if (res.meta.status !== 200) {
                    return this.$message.error('修改动态参数失败！')
                }
                this.$message.success('修改动态参数成功！')
                this.getDynamicAttr()
                this.updateDynamicAttrVisiable = false
            },
            //删除动态参数
            deleteDynamicAttr(selectAttr) {
                this.$confirm('此操作将永久删除该属性, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const {
                        data: res
                    } = await this.$http.delete(
                        `categories/${this.selectID}/attributes/${selectAttr.attr_id}`)
                    if (res.meta.status !== 200) {
                        return this.$$message.error('删除失败！')
                    }
                    this.$message.success('删除成功！')
                    this.getDynamicAttr()
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },

            //添加静态参数
            addStaticAttr() {
                this.addStaticAttrVisiable = true
            },
            async submitAddStaticAttr() {
                // console.log(this.addStaticAttrReq);
                const {
                    data: res
                } = await this.$http.post(`categories/${this.selectID}/attributes`, this.addStaticAttrReq)
                if (res.meta.status !== 201) {
                    return this.$message.error('添加静态参数失败！')
                }
                this.$message.success('添加静态参数成功！')
                this.getStaticAttr()
                this.addStaticAttrVisiable = false
            },
            //修改静态参数
            updateStaticAttr(selectAttr) {
                this.selectAttrID = selectAttr.attr_id
                this.updateStaticAttrVisiable = true
            },
            async submitUpdateStaticAttr() {
                const {
                    data: res
                } = await this.$http.put(`categories/${this.selectID}/attributes/${this.selectAttrID}`, this
                    .updateStaticAttrReq)
                if (res.meta.status !== 200) {
                    return this.$message.erorr('更新静态参数失败！')
                }
                this.$message.success('更新静态参数成功！')
                this.getStaticAttr()
                this.updateStaticAttrVisiable = false
            },
            //删除静态参数
            deleteStaticAttr(delId) {
                this.$confirm('此操作将永久删除该静态属性, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const {
                        data: res
                    } = await this.$http.delete(`categories/${this.selectID}/attributes/${delId}`)
                    if (res.meta.status !== 200) {
                        return this.$message.error('删除静态参数失败！')
                    }
                    this.$message.success('删除静态参数成功！')
                    this.getStaticAttr()
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })


            }
        }
    }
</script>
<style scoped>
    /* @import url(); 引入css类 */
    .el-alert {
        margin: 10px 0;
        padding: 10px 10px;
    }

    .el-cascader {
        margin: 0 10px
    }

    .block {
        margin: 10px 0
    }
</style>